<template>
	<view class="container">
		<view class="bookInfoView part">
			<view class="titleView">
				<text class="title">课本信息</text>
			</view>
			<view class="detailsBox">
				<text class="title">课本名称</text>
				<text class="details">{{tabs.bookName}}</text>
			</view>
			<view class="detailsBox">
				<text class="title">单词数量</text>
				<text class="details">{{tabs.numberOfWords}}</text>
			</view>
			<view class="detailsBox">
				<text class="title">学习完成度</text>
				<text class="details">{{tabs.learningPercent}}%</text>
			</view>
		</view>
		<view class="learnSetting part">
			<view class="titleView">
				<text class="title">学习设置</text>
			</view>
			<view class="detailsBox rowBox">
				<view class="textView">
					<text class="title">每天学习新词数</text>
					<text class="details">学习{{tabs.newWordsToLearn}}个新词</text>
				</view>
				<uni-icons type="forward" size="30" />
			</view>
			<view class="detailsBox rowBox">
				<text class="title">回答错误时提示释义</text>
				<switch @change="switchChange" color="#88BFFF" :checked="checkoutInfo.checked" style="zoom:.7" />
			</view>
		</view>
		<view class="bottom">
			<view class="detailsBox bottomBox">
				<text class="bottomText closeColor" >关闭当前课本</text>
			</view>
			<view class="detailsBox bottomBox">
				<text class="bottomText resetColor">重置当前课本进度</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titles:[
					"课本名称",
					"单词数量",
					"学习完成度",
					"每天学习新词数",
					"回答错误时提示释义",
				],
				tabs:{
						bookName:"十天搞定六级词汇便携版",
						numberOfWords:1583,
						learningPercent:0.3,
						newWordsToLearn:30,
					},
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
	},
	.part {
		margin-top: 2rem;
	}
	.titleView {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 23.44rem;
		height: 2.88rem;
		padding: 0 1.31rem;
	}
	.titleView .title {
		color: rgba(115, 113, 113, 1);
		font-size: 0.75rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.detailsBox {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: flex-start;
		width: 23.44rem;
		height: 2.88rem;
		padding: 0 1.31rem;
		background-color: rgba(255, 255, 255, 1);
		border-bottom: 0.06rem solid rgba(187,187,187,0.21);
	}
	.detailsBox .title {
		color: rgba(16, 16, 16, 1);
		font-size: 0.81rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.detailsBox .details {
		color: rgba(115, 113, 113, 1);
		font-size: 0.63rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.textView {
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: space-around;
		align-items: flex-start;
	}
	
	.rowBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.bottom {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		margin-top: 17rem;
		height: 8rem;
		width: 23.44rem;
	}
	.bottomBox {
		align-items: center;
		height: 2.31rem;
	}
	.bottomBox .bottomText {
		line-height: 1.25rem;
		font-size: 0.88rem;
		text-align: center;
		font-family: Arial;
	}
	.bottomBox .closeColor {
		color: rgba(16, 16, 16, 1);
	}
	.bottomBox .resetColor {
		color: rgba(16, 16, 16, 1);
	}
</style>
